<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/wei.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1474698_ngfw34ohk2i.css">
    <script src="./js/rem.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .pay-box{
            width: 100vw;
            height: 100vh;
            position:fixed;
            left: 0;
            top: 0;
        }
        .pay-mask{
            width: 100vw;
            height: 100vh;
            position:fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.65);
        }
        .pay-kk {
            width: 100vw;
            height: 3.5rem;
            position: fixed;
            left: 0;
            bottom: -3.5rem;
            background-color: #fff;
            transition: .3s;
            -webkit-trnasition:.3s;
        }
         .pay-kk .title{
            width: 100%;
            line-height: .4rem;
            text-align: center;
            border-bottom: 1px solid #ddd;
            position: relative;
            font-size: .18rem;
            color: #333;
        }
        .pay-kk .title .iconfont{
            position: absolute;
            left:.1rem;
            top: 0;
            bottom: 0;
            margin: auto;
            font-size:.14rem ;
        }
        .pay-kk  .pay-main{
            width: 100%;
            height: 1.1rem;
            overflow: hidden;
        }
        .pay-kk  .pay-main .pay-pwd{
            width: 3.34rem;
            height: 0.5rem;
            border: 1px solid #ddd;
            margin: .2rem auto .1rem;
            border-radius: .04rem;
        }
        .pay-kk  .pay-main .pay-pwd .item{
            width: 0.55rem;
            height: 0.5rem;
            float: left;
            border-right: 1px solid #ddd;
        }
        .pay-kk  .pay-main .pay-pwd .item .cirle{
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 50%;
            background-color: #000;
        }
        .pay-kk .pay-main .pay-pwd .item:last-child{
            border-right: 0;
        }
        .pay-kk  .pay-main .forget-pwd{
            text-align: right;
            width: 100%;
            padding-right: .22rem;
            font-size: .14rem;
            color: royalblue;
        }
        .pay-kk  .pay-code{
            width: 100%;
            height: auto;
        }
        .pay-kk   .pay-code .item-cow{
            width: 100%;
            height: .5rem;
            border-top: 1px solid #ddd;
        }
        .pay-kk .pay-code .item-cow .item-mei{
            width: 33.3%;
            height: .5rem;
            font-size: .18rem;
            color: #333;
            font-weight: bold;
            float: left;
            border-right: 1px solid #ddd;
        }
        .pay-kk .pay-code .item-cow .item-mei:last-child{
            border-right: 0;
        }
        .pay-kk  .pay-code .item-cow .clear{
            font-weight: normal;
            font-size: .16rem;
            background-color: #f2f5f7;
        }
        .pay-kk  .pay-code .item-cow .delete{
            font-weight: normal;
            font-size: .16rem;
            background-color: #f2f5f7;
        }
        .pay-kk  .pay-code  .activebtn{
            background-color: #dae6f1;
        }
    </style>
</head>
<body>
    <div id="root" v-cloak>
        <button @click="open">打开</button>
        <div class="pay-mask" v-show="isShow"></div>
        <pay-box :is-show="isShow" @close-pay-box="closePayBox" :style="{bottom:isShow ? '0' : '-3.5rem'}" ></pay-box>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            Vue.component('pay-box',{
                template:'<div class="pay-kk"><div class="title">'
                            +'<i class="iconfont iconguanbi" @click="closePayBox"></i><span>请输入支付密码</span></div>'
                            +'<div class="pay-main"><div class="pay-pwd">'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 1"></div></div>'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 2"></div></div>'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 3"></div></div>'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 4"></div></div>'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 5"></div></div>'
                            +'<div class="item  btn-center"><div class="cirle" v-show="paylist.length >= 6"></div></div></div>'
                            +'<div class="forget-pwd" v-if="showPwd" @click="forgetPwd">忘记密码?</div><div class="forget-pwd" v-else></div>'
                            +'</div><div class="pay-code"> <div class="item-cow">'
                            +'<div class="item-mei btn-center" @click="chosePwd(1,$event)">1</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(2,$event)">2</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(3,$event)">3</div>'
                            +'</div><div class="item-cow">'
                            +'<div class="item-mei btn-center" @click="chosePwd(4,$event)">4</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(5,$event)">5</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(6,$event)">6</div>'
                            +'</div><div class="item-cow">'
                            +'<div class="item-mei btn-center" @click="chosePwd(7,$event)">7</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(8,$event)">8</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(9,$event)">9</div>'
                            +'</div><div class="item-cow">'
                            +'<div class="item-mei btn-center clear activebtn" @click="clearPwd">清空</div>'
                            +'<div class="item-mei btn-center" @click="chosePwd(0,$event)">0</div>'
                            +'<div class="item-mei btn-center delete activebtn" @click="deletePwd">删除</div>'
                            +'</div></div></div>',
                data:function(){
                    return {
                        paylist:[],
                    }
                },
                props:{
                    isShow:{default:false,type:Boolean},
                    notice:{default:false,type:Boolean},  //是否开启振动，请在apiCloud环境下使用
                    showPwd:{default:true,type:Boolean},
                },
                methods:{
                    /**
                     * 选择密码
                    */
                    chosePwd:function(num,event){
                        this.renderEffects(event.toElement);
                        if (this.paylist.length<6) {
                            this.paylist.push(num);
                            this.paylist.length == 6 ? this.pwdSuccess() : "";
                        }
                    },
                    /**
                     * 支付成功回调
                    */
                    pwdSuccess:function(){
                        
                    },
                    /**
                     * 清除一个密码
                    */
                    deletePwd:function(event){
                        this.paylist.length >= 1 ?  this.paylist.splice(this.paylist.length -2 ,1) : "";
                        this.renderEffects(event.toElement);
                    },
                    /**
                     * 清空密码
                    */
                    clearPwd:function(event){
                        this.paylist.splice(0);
                        this.renderEffects(event.toElement);
                    },
                    /**
                     * 点击特效
                     * @param event {DomString}
                    */
                    renderEffects:function(event){
                        if (!event) {
                            return false;
                        }
                        event.classList.add('activebtn');
                        setTimeout(function(){
                            event.classList.remove('activebtn');
                        },100)
                    },
                    //振动特效
                    renderDong:function(event){

                    },
                    closePayBox:function(){
                        this.$emit('close-pay-box');
                    },
                    //忘记密码
                    forgetPwd:function(){
                        this.$emit('forget-pwd');
                    },
                },
            })
            var root = new Vue({
                el:"#root",
                data:{
                   isShow:false,
                },
                methods:{
                    open:function(){
                        this.isShow = true;
                    },
                    closePayBox:function(){
                        this.isShow = false;
                    },
                },
            })
        }
    </script>
</body>
</html>